<template>
  <div class="container">
    <button open-type='getUserInfo' class='hide'>获取用户信息</button>
    <div class="user">
      <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" />
      <span v-text="userInfo.nickName" class="name "></span>
    </div>
    <div class="logo"></div>
    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
      <swiper-item v-for="item of imgUrls" v-bind:key="item.$index">
        <image :src="item" class="slide-image" />
      </swiper-item>
    </swiper>

  </div>
</template>
<script>
import card from '@/components/card'
import '@/assert/lib/Tween.js'
import Tool from '@/assert/lib/tool.js'
export default {
  data() {
    return {
      motto: 'Hello little wechat',
      userInfo: {},
      infor: '正在加载',
      showinfor: 1,
      hero: '',
      hero_index: 30,//显示的英雄个数
      imgUrls: [
        'http://p5.qhimg.com/t015374695c47383121.jpg',
        'http://p4.qhimg.com/t01865151f45e5720d5.jpg',
        'http://p2.qhimg.com/t018d485aa309dd3372.jpg'
      ],
      circular: true,
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 1000
    }
  },
  components: {
    card
  },
  created() {
    // 调用应用实例的方法获取全局数据
    this.getUserInfo()
  },
  mounted() {

  },
  methods: {
    bindViewTap() {
      const url = '../details/main?id=2312312&name=312312'
      wx.redirectTo({ url })
    },

    test() {
      console.log('22');
    },
    changeIndicatorDots: function (e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay: function (e) {
      this.autoplay = !this.autoplay
    },
    getUserInfo() {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo

              console.log(this.userInfo.nickName);
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.hide {
  display: none;
}
.swiper {
  padding: 20px 0;
  image {
    width: 100%;
    height: 100%;
  }
}
.HYChengXingJ {
  font-family: "HYChengXingJ";
}
.container {
  width: 100%;
  height: 100%;
  .user {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    img {
      align-self: center;
      width: 50px;
      height: 50px;
    }
    .name {
      align-self: center;
      color: #000;
      font-size: 16px;
    }
  }
  .logo {
    margin: 0 auto;
    width: 89px;
    height: 44px;
    background: url("../../../static/img/logo.png") no-repeat;
    background-size: 100% 100%;
  }
  .hero-box {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: center;
    li {
      align-self: center;
      width: 50px;
      height: 50px;
      padding: 5px;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      img {
        align-self: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      span {
        padding-top: 5px;
        align-self: center;
        font-size: 10px;
      }
    }
  }
  .load {
    font-size: 12px;
    text-align: center;
  }
}
</style>
